<template>
  <u-popup
    v-model="innerShow"
    mode="bottom"
    :closeable="false"
    @close="closePop"
  >
    <view class="popTitle" v-if="title">{{ title }}</view>
    <view class="popTipContent" v-if="content">{{ content }}</view>
    <view class="popContent">
      <scroll-view class="popContent-input" :scroll-y="true">
        <u-input
          :focus="focus"
          v-model="inputValue"
          :type="'textarea'"
          :auto-height="true"
          :placeholder="placeholder"
          class="textarea-input"
          :maxlength="maxlength"
        />
      </scroll-view>
      <view class="tip" v-if="maxlength">
        <view class="tip-text"> {{ inputValue.length }}/{{ maxlength }} </view>
      </view>
    </view>
    <view class="popFooter">
      <view class="cancel-btn" @tap="closePop"> 取消 </view>
      <view
        class="confirm-btn"
        :class="{ 'confirm-btn-active': confirmBtnActive }"
        @tap="confirmInput"
      >
        确定
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref, watch, nextTick, computed } from "vue";

const props = defineProps({
  defaultValue: {
    type: String,
    default: "",
  },
  show: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入内容",
  },
  rules: {
    type: Object,
    default: () => ({
      required: true, //是否必填
      maxlength: 150, //最大长度
      validator: (val) => {
        return true; //返回字符串则不通过校验（提示字符串），只有返回true通过
      },
    }),
  },
  title: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
});

const maxlength = computed(() => {
  return props.rules?.maxlength;
});

const confirmBtnActive = computed(() => {
  return !props.rules?.required || inputValue.value.length > 0;
});

const emit = defineEmits(["confirm", "update:show"]);
const innerShow = ref(false);
const inputValue = ref(props.defaultValue);
const focus = ref(false);
watch(
  () => props.show,
  (newVal) => {
    innerShow.value = newVal;
    if (newVal) {
      inputValue.value = props.defaultValue;
      focus.value = true;
    }
  }
);

const confirmInput = () => {
  if (!confirmBtnActive.value) return;
  if (props.rules?.validator) {
    const validatorRes = props.rules.validator(inputValue.value);
    if (validatorRes !== true) {
      const title = validatorRes
        ? typeof validatorRes === "string"
          ? validatorRes
          : "校验不通过"
        : "校验不通过";
      uni.showToast({
        title: title,
        icon: "none",
      });
      return;
    }
  }
  emit("confirm", inputValue.value);
  closePop();
};

const closePop = () => {
  innerShow.value = false;
  emit("update:show", false);
};
</script>

<style scoped lang="scss">
:deep(.u-drawer-bottom) {
  width: calc(100vw - 20px) !important;
  margin: 10px auto;
  border-radius: 10px;
  padding: 30rpx;
}

.popTitle {
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 10px;
  padding-left: 1px;
}

.popTipContent {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.popContent {
  .popContent-input {
    max-height: 50vh;
  }
  .tip {
    background: #f8f8f8;
    font-size: 0.8em;
    padding: 0px 10px 5px;
  }
}

:deep(.textarea-input) {
  //   min-height: 100px;
  padding: 20rpx !important;
  background: #f8f8f8;
  border-radius: 8rpx;
  .u-input__textarea {
    padding: 0;
  }
}

.popFooter {
  padding: 10px 10px 0;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .confirm-btn {
    color: $u-tips-color;
  }
  .confirm-btn-active {
    color: $u-type-primary;
  }
}
</style>
